import Wrapper from "./style.ts";
import code from "@/static/imgs/courseContent/二维码 (3).svg";
import qrCode from "@/static/imgs/courseContent/qr_code.svg";
import setting from "@/static/imgs/courseContent/设置.svg";
import evaluate from "@/static/imgs/courseContent/评价.svg";
import document from "@/static/imgs/courseContent/文档中心.svg";
import member from "@/static/imgs/courseContent/成员管理.svg";
import skin from "@/static/imgs/courseContent/皮肤.svg";
import eye from "@/static/imgs/courseContent/眼睛.svg";
import share from "@/static/imgs/courseContent/分享.svg";
import play from "@/static/imgs/courseContent/播放.svg";
import classNames from 'classnames';
import React, {useContext, useEffect, useRef, useState} from "react";
import {Outlet} from "react-router";
import {useNavigate} from 'react-router-dom';
import {CourseContentProps} from "@/types/CourseContentTypes.ts";
import {Modal} from "antd";
import JoinClassDialog from "@/components/JoinClassDialog";
import {CourseContext} from "@/pages/TeacherCourseContent/context/CourseContext.ts";
import {getCourseDetail} from "@/api/student/courseApi.ts";


const CourseContent: React.FC<CourseContentProps> = ({routes}) => {
    const [name, setName] = useState('')
    const [courseCode, setCourseCode] = useState('')
    const [bg, setBG] = useState('')
    const [teachClass, setTeachClass] = useState('')
    const [memberCount, setMemberCount] = useState(0)

    const courseContext = useContext(CourseContext)
    console.log(courseContext)

    useEffect(() => {
        // 获取课程信息
        getCourseDetail(courseContext).then(res => {
            const {name, code, bg, teachClass, memberCount} = res.data.data
            setName(name)
            setCourseCode(code)
            setBG(bg)
            setTeachClass(teachClass)
            setMemberCount(memberCount)
        })
    }, [])
    // 处理tab切换
    const [selectBar, setSelectBar] = useState(0);
    const navgiate = useNavigate();
    const handleBarClick = (e: React.MouseEvent<HTMLElement>) => {
        const target = e.target as HTMLElement;
        const index = target.getAttribute('bar-index') || 0;
        setSelectBar(+index);
        // 路由跳转
        routes.forEach((item) => {
            if (item.index == +index) {
                console.log(item.path);
                navgiate(item.path);
            }
        })
    }

    // 更换皮肤
    const [open, setOpen] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);

    const showModal = () => {
        setOpen(true);
    };
    const handleOk = () => {
        setConfirmLoading(true);
        setTimeout(() => {
            setOpen(false);
            setConfirmLoading(false);
        }, 2000);
    };

    const handleCancel = () => {
        setOpen(false);
    };

    const background = [
        {
            id: 1,
            img: 'https://assets.ketangpai.com/theme/student/big/51.png'
        },
        {
            id: 2,
            img: 'https://assets.ketangpai.com/theme/student/big/51.png'
        },
        {
            id: 3,
            img: 'https://assets.ketangpai.com/theme/student/big/51.png'
        },
        {
            id: 4,
            img: 'https://assets.ketangpai.com/theme/student/big/51.png'
        },
        {
            id: 5,
            img: 'https://assets.ketangpai.com/theme/student/big/51.png'
        },
        {
            id: 6,
            img: 'https://assets.ketangpai.com/theme/student/big/51.png'
        },
        {
            id: 7,
            img: 'https://assets.ketangpai.com/theme/student/big/51.png'
        },
        {
            id: 8,
            img: 'https://assets.ketangpai.com/theme/student/big/51.png'
        },
        {
            id: 9,
            img: 'https://assets.ketangpai.com/theme/student/big/51.png'
        },
        {
            id: 10,
            img: 'https://assets.ketangpai.com/theme/student/big/51.png'
        },
    ]
    const [selectedImg, setSelectedImg] = useState(background[0].id);

    // 加课码
    const [showDialog, /*setShowDialog*/] = useState(false)

    const mainRef = useRef<any>();
    return (
        <Wrapper>
            <div style={{display: showDialog ? '' : 'none'}}>
                <JoinClassDialog/>
            </div>
            <div className="main" ref={mainRef} style={{display: !showDialog ? '' : 'none'}}>
                <div className="header">
                    <div className="header-layout">
                        <img
                            src={bg}
                            alt=""
                        />
                        <div className="header-top">
                            <div className="left" style={{textAlign: 'start'}}>
                                <h1>{name}</h1>
                                <h2>{teachClass}</h2>
                                <div className="flex bottom">
                                    <div className="flex pr16">
                                        <img className="code" src={code}/>
                                        <div>加课码</div>
                                        <div>{courseCode}</div>
                                    </div>
                                    <div className="flex pr16">
                                        <div>已有</div>
                                        <div>{memberCount}</div>
                                        <div>人加入</div>
                                    </div>
                                    <div className="flex pr16">
                                        <img className="code" src={qrCode} alt=""/>
                                        <div>报名审核</div>
                                    </div>
                                </div>
                            </div>
                            <div className="right">
                                <div className="top flex">
                                    <div className="mr8 flex" onClick={() => {
                                        navgiate('/teacherCourseSetting')
                                    }}>
                                        <img src={setting} alt="" className="code"/>
                                        <div>课程设置</div>
                                    </div>
                                    <div className="mr8 flex">
                                        <img src={evaluate} alt="" className="code"/>
                                        <div>课程评价</div>
                                    </div>
                                    <div className="mr8 flex">
                                        <img src={document} alt="" className="code"/>
                                        <div>打包下载</div>
                                    </div>
                                    <div className="mr8 flex">
                                        <img src={member} alt="" className="code"/>
                                        <div>成员管理</div>
                                    </div>
                                    <div className="mr8 flex" onClick={showModal}>
                                        <img src={skin} alt="" className="code"/>
                                        <div>更换皮肤</div>
                                    </div>
                                </div>
                                <div className="bottom flex">
                                    <div className="flex item">
                                        <img className="code" src={eye} alt=""/>
                                        <div>学生视角</div>
                                    </div>
                                    <div className="flex item">
                                        <img className="code" src={share} alt=""/>
                                        <div>分享&评审</div>
                                    </div>
                                    <div className="flex">
                                        <button className="">
                                            <img className="code" src={play} alt=""/>
                                            <div>开始上课</div>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="header-bottom flex">
                        <div className="bar flex" onClick={handleBarClick}>
                            <div bar-index='0'
                                 className={classNames('bar-item', {'bar-selected': selectBar == 0})}>课程教学
                            </div>
                            <div bar-index='1'
                                 className={classNames('bar-item', {'bar-selected': selectBar == 1})}>学情分析
                            </div>
                            <div bar-index='2'
                                 className={classNames('bar-item', {'bar-selected': selectBar == 2})}>成绩管理
                            </div>
                            <div bar-index='3'
                                 className={classNames('bar-item', {'bar-selected': selectBar == 3})}>课程达成度
                            </div>
                        </div>
                    </div>
                </div>
                <div className="component-layout">
                    <Outlet/>
                </div>
                <Modal
                    cancelText={'取消'}
                    okText={'确定'}
                    className='course-img-modal'
                    title="请选择课程图片"
                    open={open}
                    onOk={handleOk}
                    confirmLoading={confirmLoading}
                    onCancel={handleCancel}
                    getContainer={mainRef.current}
                    width={'fit-content'}
                >
                    <div className='img-line'>
                        {background.map((item) => {
                            return (
                                <div className={classNames('img-item', {'active': selectedImg === item.id})}
                                     key={item.id} onClick={() => setSelectedImg(item.id)}>
                                    <img src={item.img} alt=""/>
                                </div>
                            )
                        })}
                    </div>
                </Modal>
            </div>

        </Wrapper>
    );
};
export default CourseContent;
